---
import "#/styles/fonts.css"

import { highlightCode } from "#/lib/highlight-code.ts"

/**
 * This code block component is used to display code snippets outside of md/mdx files.
 * The snippet has to have a language tag, e.g. ```[language] [code] ```.
 * If you're doing a multi-line string with backticks, you have to escape the backticks with a backslash.
 * @example: https://stackblitz.com/edit/github-j3wpz9?file=src%2Fpages%2Fsnippet.astro
 */
interface Props {
  code: string
}

const { code } = Astro.props

const highlightedCode = await highlightCode(code)
---

<div
  class="code-snippet font-mono"
  set:html={highlightedCode}
/>

<style is:inline>
.code-snippet > figure[data-rehype-pretty-code-figure] > pre {
  background-color: rgba(0, 0, 0, 0) !important;
}

figure pre code span {
  font-family: "JetBrains Mono", monospace !important;
}

@media (max-width: 400px) {
  figure[data-rehype-pretty-code-figure] {
    max-width: 385px;
  }
}
</style>
